<template>
  <div style=" margin-left: 10%; margin-top: 1%; margin-bottom: 1%">
    <a-button @click="saveClick" style="
    color: #fff;
    background: #2d8cf0;
    border-color: #2d8cf0;
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);">
      新增发布
    </a-button>
  </div>
  <a-list item-layout="vertical" size="large" :data-source="listData"
          style="background-color: #ffffff ; width: 80%;  margin-left: 10%">
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <template #extra>
          <img
            width="272"
            alt="logo"
            :src="item.img"
          />
          <a-button type="dashed" danger @click="removeAnswer(item.id)">删除</a-button>
        </template>
        <a-list-item-meta :description="item.description">
          <template #title>
            <a @click="routerView(item.id,item.dialogueId)">{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar :src="item.avatar"/>
          </template>

        </a-list-item-meta>
        <a @click="routerView(item.id,item.dialogueId)">{{ item.content }}</a>
      </a-list-item>
    </template>
  </a-list>
  <save :visible="state.visibleSave" @close="closeSave"></save>
  <edit :visible="state.visibleEdit" :viewId="state.viewId" :record="state.recordEdit" @close="closeEdit" ></edit>
</template>
<script>
import {createVNode, defineComponent, reactive} from 'vue';
import save from './modal/save';
import edit from './modal/edit';
import {getAnswerList, getLetterCount, remove} from "@/api/module/answer";
import {useRouter} from "vue-router";
import {message, modal} from 'ant-design-vue';
import {ExclamationCircleOutlined} from "_@ant-design_icons-vue@6.1.0@@ant-design/icons-vue";

const removeKey = "removeAnswer";
export default defineComponent({
  components: {
    save,
    edit,
  },
  data() {
    return {
      listData: []
    }
  },


  mounted() {
    // 获取讨论区列表
    getAnswerList({}).then((response) => {
      let data1 = response.data;
      for (let i = 0; i < data1.length; i++) {
        this.listData.push({
          img: data1[i].img,
          id: data1[i].id,
          dialogueId: data1[i].dialogueId,
          title: data1[i].title,
          avatar: data1[i].avatar,
          description: "作者：" + data1[i].nickname + "-发布时间：" + data1[i].sendTime,
          content: data1[i].description,
        })
      }
    })
  },


  setup() {
    const route = useRouter();
    let viewId = '';
    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      visibleSave: false,
      visibleEdit: false,
      viewId: '',
      recordEdit: {},
    })
    const saveClick = function (value) {
      state.visibleSave = !state.visibleSave
    }
    // 关闭新增
    const closeSave = function () {
      state.visibleSave = false
    }
    /// 关闭修改
    const closeEdit = function () {
      state.visibleEdit = !state.visibleEdit
    }
    // 点击单条评论查看具体内容
    const routerView = function (record,dialogueId) {
    console.log("record--------------",dialogueId)
      getLetterCount({"id": record}).then((response)=>{
        console.log("response------------------",response)
        state.recordEdit = response.data
        // showHtml.value = response.data.content
        // comments.value = response.data.Comment
      })
      console.log("record：", dialogueId)
      state.viewId = dialogueId
      state.visibleEdit = !state.visibleEdit
    }

    // 删除发布内容
    const removeAnswer = function (item) {
      modal.confirm({
        title: '您是否确定要删除此发布内容?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({content: "提交中...", key: removeKey});
          remove({"id": item}).then((response) => {
            if (response.success) {
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(() =>
                location.reload()
              )
            } else {
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }
    return {
      state, // 状态共享
      saveClick,
      closeSave,
      closeEdit,
      routerView,
      removeAnswer,
      viewId,
    };
  },

});
</script>
